

/* 放大镜 + 购物车 */
.bgr{
    background-color: red;
    overflow: hidden;
}
.bgw{
    background-color: white;
    overflow: hidden;
}
.box{
    width: 1170px;
    height: 660px;
    margin: 150px auto;
    
}
.box .tab{
    width: 500px;
    height: 650px;
    float: left;
}
.tab .btn{
    height: 40px;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.tab .btn span{
    width: 110px;
    height: 110px;
    font-size: 14px;
    margin-top: 100px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin-left: 10px;
    
}
.btn span img{
    width: 100%;
    height: 100%;
    border: none;
    vertical-align: top;
    overflow: hidden;
    
}
.bg{
    border: 1px solid red !important;
}
.tab .content{
    height:500px;
    width: 500px;
    overflow: hidden;
    margin-bottom:30px;
    position: relative;
}

.tab .content>div{
    width: 100%;
    height: 100%;
    font-size: 30px;
    text-align: center;
    line-height: 260px;
    display: none;
}
.content>div img{
    height: 100%;
    width: 100%;
}
.content .mask{
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255,0.3);
    position: absolute;
    cursor: move;
    display: none;
}
.bigBox{
    width: 400px;
    height: 400px;
    float: left;
    position: absolute;
    left: 750px;
    overflow: hidden;
    display: none;
    margin-left: 40px; 
    z-index: 9999999;
    // margin-top: 100px;
}

.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.bigBox>.pic{
    width: 800px;
    height: 800px;
    position: absolute;
}
/* 购物车 */
.box .infowrap{
    position: relative;
    float: right;
    width: 580px;
    height: 580px;

}
.box .infowrap .img1>p{
    float: right;
}
.box .infowrap >.er>.img1{
    float: right;
    margin-top: 3px;
    margin-right: 3px;
}
.box .infowrap> p{
    float: right;
    cursor: pointer;
}
.box .infowrap .img2{
  
    display: none;
    position: absolute;
    top: 30px;
    right: 0px;
    
}

.box .infowrap .title .en{
    margin-left: 26px;
    font-size: 20px;
}
.box .infowrap .desc{
    width: 100%;
    padding: 8px 0 24px;
    color: #b5b5b5;
    border-bottom: 1px dotted #b3a3a3;
}
.box .infowrap .desc .text{
    line-height: 24px;
    text-align: left;
}
.box .infowrap >.title{
    margin-top: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #45515e;
}
.box .infowrap .spac .title{
    line-height: 45px;
    color: #505050;
    font-size: 16px;
}
.box .infowrap .kx .title{
    line-height: 45px;
    color: #505050;
    font-size: 16px;
}
.box .infowrap .spac> span{
   
    width: 498px;
    height: 52px;
    background-color: #f5f5f5;
    line-height: 50px;
    margin-left: 20px;
    display: inline-block;
 
}
.box .infowrap .kx {
    margin-top: 20px;
}
.box .infowrap .kx span{
    width: 498px;
    height: 52px;
    background-color: #e9546b;
    line-height: 50px;
    display: inline-block;
    // margin-left: 20px;
}
.box .infowrap .kx span .active{
    display: inline-block;
    color: #fff;
    font-size: 28px;
    // margin-left: 20px;
}


.box .infowrap .spac span a{
    display: inline-block;
    width: 110px;
    height: 48px;
    color: #45515e;
    text-align: center;
    font-size: 16px;
    line-height: 48px;
}
.box .infowrap .kx span a{
    
    color: #fff;
    font-size: 28px;
    margin-left: 20px;
    display: none;
}
.box .infowrap .spac span .cgk{
    margin-left: 200px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    
}
.box .infowrap .spac span img{
    display: inline-block;
    margin-bottom:8px ;
}
.box .infowrap .spac span a:hover{
    text-decoration: none;
}
.box .infowrap .spac .title span .active{
    color: #e9546b;
    border-bottom: 4px solid #e9546b;
}

.box .infowrap .spac .tips{
    width: 100%;
    height: 80px;
    border-bottom: 1px dotted #b3a3a3;
    border-top: 1px dotted #b3a3a3;
    margin-top: 20px;
}

.infowrap .spac .tips ul{
    display: none;
}
.infowrap .spac .tips .active{
    display: block;
}
.infowrap .spac .tips ul li{
    position: relative;
    display: block;
    
    width: 200px;
    line-height: 30px;
    color: #b3b3b3;
    display: inline-block;
   
}

.infowrap .spac .tips div{

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 50px;
    list-style-type: circle;
}
.infowrap .spac .number {
    margin-top: 50px;
    width: 100%;
    height: 100px;
    position: relative;
}
.infowrap .spac .number .title{
    float: left;
}
.infowrap .spac .number .count{
    /* position: relative; */
    // float: left;
    width: 300px;
    height: 35px;
    display: inline-block;
    margin-left: 20px;
}
.infowrap .spac .number .count button{
   width: 27.88px;
  
    
}

.infowrap .spac .number input{
    text-align: center;
}
.infowrap .spac .operates{
    width: 100%;
    margin-top: 20px;
    margin-left: 20px;
    position: relative;
}

.infowrap .spac .operates .like{
    color: #c8c8c8;
    font-size: 14px;
    line-height: 16px;
   
}

.infowrap .spac .operates .Btn{
    width: 100%;
    position: absolute;
    left: 50px;
    bottom: 10px;
}.infowrap .spac .operates .Btn button{
    border-radius: 0;
    width: 230px;
    height: 50px;
    line-height: 35px;
    text-align: center;
    border-radius: 2px;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;

}


/* 详情区 */
  .product{
      width: 1170px;
      margin: 100px auto;
    img{
        display: block;
        margin: 0 auto;
    }
  } 

  .loading{
      width: 180px;
      height: 120px;
      border-radius: 10px;
      background: rgba(0,0,0,0.6);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      text-align: center;
      color: red;
      line-height: 120px;
      font-size: 20px;
      font-weight: 900;
      display: none;
  }

 

